<template>
<div>
  <mu-table :fixedFooter="fixedFooter" :selectable="selectable" :showCheckbox="showCheckbox" @rowClick="rowClassClick">
    <mu-thead slot="header">
      <mu-tr>
        <mu-th class="classtime">上课时间</mu-th>
        <mu-th class="selectedcount">已选/总数</mu-th>
        <mu-th class="classname">课程</mu-th>
        <mu-th class="classroom">教室</mu-th>
      </mu-tr>
    </mu-thead>
    <mu-tbody>
      <mu-tr v-for="item,index in classesInfo"  :key="index" tag="1" :selectable="item.name != ''">
        <mu-td class="classtime">
          {{item.start_time.substring(0,5)}}<br>-<br>{{item.end_time.substring(0,5)}}
        </mu-td>
        <mu-td class="selectedcount" v-if="item.name != '' ">
          <mu-badge :content="item.selected_num.toString()" class="icon-badge" circle secondary></mu-badge>
          /
          <mu-badge :content="item.all_num.toString()" class="icon-badge" circle secondary></mu-badge>
        </mu-td>
        <mu-td class="selectedcount" v-else>
          
        </mu-td>
        <mu-td v-if=" item.name != '' " class="classname" :style="{color:item.tag_color}">
          {{item.name}}<br>教练：{{item.teacher}}
        </mu-td>
        <mu-td class="classname" v-else>
          
        </mu-td>
        <mu-td v-if=" item.name != '' " class="classroom" :style="{color:item.tag_color}">
          {{item.name != '' ? item.classrom : ''}}
        </mu-td>
        <mu-td class="classroom" v-else>
          
        </mu-td>
      </mu-tr>
    </mu-tbody>
  </mu-table>
  <mDialog ref="detailDialog"></mDialog>
</div>
</template>

<script>
import {formatDate} from '../utils/formatDate'
import mDialog from './detaildialog'
export default {
  props:['today'],
  data () {
    return {
      fixedHeader: true,
      fixedFooter: false,
      selectable: true,
      multiSelectable: false,
      enableSelectAll: false,
      showCheckbox: false
    }
  },
  computed:{
    classesInfo(){  //获取今明两天课程信息
      return this.$store.state.datas.classes[this.today].info
    }
  },
  methods:{
    rowClassClick(index,tr){
      if(tr.selectable == true){
        this.$refs.detailDialog.open(index,this.today)
      }
    }
  },
  components:{
    mDialog
  }
}
</script>

<style lang="css">
.classtime{
  width: 50px;
}
.selectedcount{
  width: 50px;
}
.classname{
  width: 120px;
  word-wrap: break-word;
}
.classroom{
  width: 50px;
}

.mu-td,.mu-th {
  padding: 0px;
  text-align: center;
}
.mu-table {
  overflow: scroll;
}
.mu-badge {
  width: 22px;
  height: 22px;
}
</style>